<template>
  <div class="app">
    <div class="left">
      <img :src="userinfo.avatar" alt="" />
      <div class="username">{{ userinfo.nickname }}</div>
      <div class="sign">这个家伙很懒，什么都没有留下</div>
      <div class="userinfo-item">
        <el-icon><User /></el-icon>
        <span>{{ userinfo.nickname }}</span>
      </div>
      <div class="userinfo-item">
        <el-icon><LocationInformation /></el-icon>
        <span>中国 • 四川省 • 泸州市 • 龙马潭区</span>
      </div>
      <div class="userinfo-item">
        <el-icon><Medal /></el-icon>
        <span>Python、Django、Vue、ElementUI、Nodejs</span>
      </div>
    </div>
    <div class="right">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="基本信息" name="first">
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            style="max-width: 460px"
            :model="user"
          >
            <el-form-item label="姓名">
              <el-input v-model="user.name" clearable />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="user.nick" clearable />
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="user.sex">
                <el-option value="男" />
                <el-option value="女" />
                <el-option value="保密" />
              </el-select>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="user.phone" clearable />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="user.email" clearable />
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input v-model="user.addr" clearable />
            </el-form-item>
            <el-form-item label="个人简介">
              <el-input
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                v-model="user.sign"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="success">保存修改</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const labelPosition = ref("right");
const userinfo = ref("");
const activeName = ref("first");
const user = ref({
  name: "",
  nick: "",
  sex: "女",
  phone: "1300000xxx",
  email: "130@qq.com",
  addr: "中国 • 四川省 • 泸州市 • 龙马潭区",
  sign: "这个家伙很懒，什么都没有留下",
});

onMounted(() => {
  userinfo.value = JSON.parse(localStorage.getItem("userinfo"));
  user.value.name = userinfo.value.nickname;
  user.value.nick = userinfo.value.nickname;
});
</script>

<style scoped>
.app {
  display: flex;
}

.app .left {
  width: 400px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  color: #303133;
  padding: 20px;
}

.app .left img {
  width: 104px;
  height: 104px;
  border-radius: 100%;
}

.app .left .username {
  padding: 5px 0;
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 17px;
  line-height: 28px;
}

.app .left .sign {
  font-size: 14px;
}

.app .left .userinfo-item {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.app .left .userinfo-item > span {
  flex: 1;
  display: block;
  font-size: 14px;
  margin-left: 5px;
}

.right {
  width: 500px;
  height: 100%;
  margin-left: 30px;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  color: #303133;
  padding: 20px;
}
</style>